<template>
  <div class="invitationContainer">
    <div class="my">
      <Card style="width:920px" :padding="0">
        <div class="selfInfo">
          <!-- 个人信息 -->
          <div class="selfInfo-left">
            <!-- 头像 -->
            <div class="head-sculpture">
              <img
                style="width:100%;height:100%"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt
              />
            </div>
            <!-- 描述 -->
            <div class="info-text">
              <div class="name">
                <span>朱学良牛逼</span>
                <img src="../../assets/images/v2.png" alt />
              </div>
              <div class="my-btns">
                <div
                  class="btn"
                  v-for="btn in btns"
                  :key="btn.title"
                  @click="btnClick(btn)"
                >{{ btn.title }}</div>
              </div>
            </div>
          </div>
          <!-- 关注粉丝 -->
          <div class="selfInfo-right df">
            <div class="follow">
              <span class="num">1</span>
              <span>粉丝</span>
            </div>
            <div class="line"></div>
            <div class="follow">
              <span class="num">25</span>
              <span>关注</span>
            </div>
          </div>
        </div>
      </Card>
      <Card style="width:920px;margin-top:12px">
        <Tabs value="我的帖子">
          <Tab-pane v-for="tab in tabs" :key="tab.label" :label="tab.label" :name="tab.label">
            <tieZi v-if="tab.label === '我的帖子'"></tieZi>
            <shouCang v-if="tab.label === '我的收藏'"></shouCang>
            <pingJia v-if="tab.label === '游戏评价'"></pingJia>
            <huiFu v-if="tab.label === '游戏回复'"></huiFu>
          </Tab-pane>
        </Tabs>
      </Card>
    </div>
  </div>
</template>

<script>
import tieZi from "./components/tiezi.vue";
import shouCang from "./components/shoucang.vue";
import pingJia from "./components/pingjia.vue";
import huiFu from "./components/huifu.vue";
export default {
  components: {
    tieZi,
    shouCang,
    pingJia,
    huiFu,
  },
  data() {
    return {
      btns: [
        { title: "我的钱包" },
        { title: "编辑资料" },
        { title: "实名认证" },
      ],
      tabs: [
        { label: "我的帖子" },
        { label: "我的收藏" },
        { label: "游戏评价" },
        { label: "游戏回复" },
      ],
    };
  },

  created() {},

  methods: {
    //   点击信息下方按钮
    btnClick(btnName) {
      console.log(btnName);
    },
  },
};
</script>

<style scoped lang='less'>
.df {
  display: flex;
  justify-content: center;
  align-items: center;
}
.invitationContainer {
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  .my {
    width: 920px;
    height: 100vh;
    margin: 0 auto;
    padding: 20px 0;
    box-sizing: border-box;
    .selfInfo {
      width: 100%;
      height: 200px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .selfInfo-left {
        display: flex;
        .head-sculpture {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background-color: pink;
          margin-right: 20px;
          overflow: hidden;
        }
        .info-text {
          height: 120px;
          display: flex;
          flex-direction: column;
          .name {
            font-size: 16px;
            font-weight: 600;
            flex: 1;
            display: flex;
            align-items: center;
            img {
              width: 18px;
              height: 18px;
              margin-left: 4px;
            }
          }
          .my-btns {
            width: 100%;
            flex: 1;
            display: flex;
            align-items: center;
            .btn {
              padding: 6px 10px;
              margin-right: 8px;
              cursor: pointer;
              border-radius: 3px;
              background-color: #253145;
              color: #efefef;
              font-size: 12px;
            }
          }
        }
      }
      .selfInfo-right {
        .line {
          width: 1px;
          height: 20px;
          border-right: 1px solid #ccc;
        }
        .follow {
          padding: 10px 30px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .num {
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
          }
        }
      }
    }
  }

  /deep/.ivu-tabs-bar {
    border-bottom: unset !important;
  }
  /deep/.ivu-tabs-nav .ivu-tabs-tab:hover {
    color: #000;
    font-weight: 600;
  }
  /deep/.ivu-tabs-ink-bar {
    width: 21px !important;
    margin-left: 33px;
    background-color: #ff9900 !important;
  }
  /deep/ .ivu-tabs-tab-active {
    color: #000;
    font-weight: 600;
  }
  /deep/.ivu-tabs .ivu-tabs-tabpane{
      padding: 15px;
  }
}
</style>
